<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app">
    商品名称
    <input type="text">
    商品价格
    <input type="number">
    购买数量
    <input type="number">
    <button>加入购物车</button>
    <table v-cloak class="table table-bordered table-hover" style="max-width:800px;margin:30px auto">
      <thead>
        <tr>
          <th>
            商品名称
          </th>
          <th>
            商品价格
          </th>
          <th>
            购买数量
          </th>
          <th>
            小计
          </th>
          <th>
            操作
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="!items.length">
          <td colspan="5" class="text-center">暂无商品</td>
        </tr>
        <tr v-for="(item,index) in items">
          <td>
            <input type="checkbox" @change="itemCheckedChange" v-model="item.checked">
            {{ item.name }}
          </td>
          <td>
            ￥ {{item.price}}
          </td>
          <td>
            <button @click="addNum(index)" class="btn btn-xs">+</button>
            {{item.num}}
            <button @click="reduceNum(index)" class="btn btn-xs">-</button>
          </td>
          <td>
            {{ (item.num * item.price).toFixed(2) }}
          </td>
          <td>
            <button @click="delItem(index)" class="btn btn-sm btn-danger">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td> 全选：
            <input type="checkbox" @change="allCheckedChange" v-model="allChecked">
          </td>
          <td colspan="4">
            总价：
            {{ total }}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        item: {
          name: '',
          num: 0,
          price: 0
        },
        items: [
          {
            name: '商品1',
            price: 18.8,
            num: 1,
            checked: true
          },
          {
            name: '商品2',
            price: 188,
            num: 2,
            checked: true
          },
          {
            name: '商品3',
            price: 29.9,
            num: 1,
            checked: true
          },
          {
            name: '商品4',
            price: 188,
            num: 1,
            checked: false
          }
        ],
        total: 0,
        allChecked: true
      },
      methods: {
        allCheckedChange() {
          // 点击切换全选选中状态
          this.items.forEach(item => {
            item.checked = this.allChecked;
          })
          this.calcTotal();
        },
        itemCheckedChange() {
          // 点击改变单个商品选中状态
          this.calcTotal();
          this.setAllCheckedState();
        },
        setAllCheckedState() {
          // 设置全选状态
          /* 
            所有商品选中状态都为true 则全选为true
            否则 全选  为 false
          */
          const allChecked = this.items.every(item => item.checked);
          this.allChecked = allChecked;
        },
        delItem(index) {
          if (confirm('您确认删除嘛?')) {
            this.items.splice(index, 1);
            this.calcTotal();
          }
        },
        reduceNum(index) {
          // 减少购买数量
          this.items[index].num--;
          if (this.items[index].num <= 1) {
            this.items[index].num = 1;
          }
          this.calcTotal()
        },
        addNum(index) {
          // 增加购买数量
          this.items[index].num++;
          // 重新计算总价格
          this.calcTotal();
        },
        calcTotal() {
          // 计算总价格
          /* 
            所有已经选中商品单价*数量总和
          */
          //  去除未选中商品
          /* var checkedItems = this.items.filter(function(item){
            return item.checked
          }) */
          const checkedItems = this.items.filter(item => item.checked);
          this.total = 0;
          checkedItems.forEach((item) => {
            this.total += item.num * item.price
          })

          this.total = parseFloat(this.total.toFixed(2));

        }
      }
    })
    // 计算总价格
    vm.calcTotal();
    // 设置全选状态
    vm.setAllCheckedState();
  </script>
</body>

</html>